{% extends "app/loadscript.html" %}


 {% block content %}
  <script type='text/javascript' src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js"></script>
<script>
$('.js-captcha-refresh').click(function(){
    $form = $(this).parents('form');

    $.getJSON($(this).data('url'), {}, function(json) {
        // This should update your captcha image src and captcha hidden input
    });

    return false;
});
</script>
<div class="container">
<div class="logincontainer">
    <div class="col-md-8">
        <section id="loginForm">
            <form action="." method="post" class="form-horizontal" enctype="multipart/form-data">
                {% csrf_token %}
                <h4>Use your email to sign up please.</h4>
                <hr />
                <div class="form-group">
                    <label for="email" class="col-md-2 control-label">your email&nbsp; </label>
                    <div class="col-md-10">
                       <input type="text" class="email" name="email">
                    </div>
                </div>

                <div class="form-group">
                    <label for="username" class="col-md-2 control-label">User name &nbsp; </label>
                    <div class="col-md-10">
                       <input type="text" class="email" name="username">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password1"  class="col-md-2 control-label">Password &nbsp; </label>
                    <div class="col-md-10">
                      <input type="password" name="password1">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password2" class="col-md-2 control-label">Password &nbsp; </label>
                    <div class="col-md-10">
                      <input type="password" name="password2">
                    </div>
                </div>
                <div class="form-group">
                          <label for="id_password10" class="col-md-2 control-label"></label>
                            <div class="col-md-offset-2 col-md-10">
                            </div>
                </div>
                <div class="form-group">

                验证码: {{ form.captcha }}
                     <button class='js-captcha-refresh'>刷新</button>
                </div>

                <div class="form-group">
                          <label for="id_password10" class="col-md-2 control-label"></label>
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="I'm OK " class="btn btn-default" />
                    </div>
                </div>
                {% if form.errors %}
                <p class="validation-summary-errors">Please enter a correct user name and password.</p>
                {% endif %}
            </form>
        </section>
        <div class="error btns login-form-tips" id="jsLoginTips">
{% for key, error in form.errors.items %}
{{ error }}
{% endfor %}
{{ msg }}</div>
    </div>
    <div class="col-md-4">
        <section id="socialLoginForm"></section>
    </div>
</div>

</div>
{% endblock %}

{% block scripts %}

    {% load staticfiles %}
<script src="{% static 'app/scripts/jquery.validate.min.js' %}"></script>

{% endblock %}
